import { normFile, normFileGetVal } from '@/components/BuildForm';
import { CONFIG } from '@/constants';
import { PlusOutlined } from '@ant-design/icons';
import { FormattedMessage } from '@umijs/max';
import { useIntl } from '@umijs/max';
import {
    Col,
    Divider,
    Form,
    GetProp,
    Input,
    InputNumber,
    Row,
    Upload,
    UploadFile,
    UploadProps,
    message,
} from 'antd';
import { ReactElement } from 'react';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

type IParams = {
    children?: ReactElement;
    onFinish?: (val: IBuildForm.IDefault,form:any) => void;
};

const SubmitStep: React.FC<IParams> = (props) => {
    const [form] = Form.useForm();
    const intl = useIntl();
    const beforeUpload = (file: FileType) => {
        const isJpgOrPng =
            file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
    };
    
    function onFinish(val: IBuildForm.IDefault) {
        if (props.onFinish) {
            props.onFinish(val,form);
        }
    }
    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
        </button>
    );
    return (
        <>
            <Divider>
                <FormattedMessage id="上传进度"></FormattedMessage>
            </Divider>
            <Form
                style={{ marginTop: 20 }}
                form={form}
                layout="vertical"
                onFinish={onFinish}
                autoComplete="off"
            >
                <Row gutter={30}>
                    <Col span={8}>
                        <Form.Item
                            name="step"
                            label={intl.formatMessage({
                                id: '完成进度百分比，请上传1 - 100的整数，3天不传扣除1信誉分',
                            })}
                            rules={[{ required: true }]}
                        >
                            <InputNumber
                                min={1}
                                max={100}
                                style={{ width: '100%' }}
                                placeholder={intl.formatMessage({
                                    id: '请输入完成进度百分比',
                                })}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="title"
                            label={intl.formatMessage({
                                id: '完成进度文字说明',
                            })}
                            rules={[{ required: true, min: 10 }]}
                        >
                            <Input
                                placeholder={intl.formatMessage({
                                    id: '请输入完成进度文字说明，10个字以上',
                                })}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="images"
                            label={intl.formatMessage({
                                id: '进度完成图片',
                            })}
                            rules={[{ required: true }]}
                            getValueFromEvent={normFile}
                            valuePropName="fileList"
                            getValueProps={normFileGetVal}
                        >
                            <Upload
                                beforeUpload={beforeUpload}
                                listType="picture-card"
                                action={
                                    CONFIG.HTTP_REQUEST_URL + '/common/upload'
                                }
                                maxCount={6}
                            >
                                {uploadButton}
                            </Upload>
                        </Form.Item>
                    </Col>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        {props.children}
                    </Col>
                </Row>
            </Form>
        </>
    );
};
export default SubmitStep;
